import AppSectionList from "./AppSectionList.js";

export default{
  components: {AppSectionList},
    template: /*html*/ `
    <app-section-list 
    headline="未购零食"
    :buyChild="filters.beforeBuy" >

    </app-section-list>

    <app-section-list 
    headline="已购零食"
    :buyChild="filters.afterBuy" >

    </app-section-list>

`,
    data(){
        return{
            title:'零食清单',
            foods:[
                {id :1, name:'原味鱿鱼丝', image:'./images/原味鱿鱼丝.png',purchased:false},
                {id :2, name:'辣味鱿鱼丝', image:'./images/辣味鱿鱼丝.png',purchased:false},
                {id :3, name:'炭烧味鱿鱼丝', image:'./images/炭烧味鱿鱼丝.png',purchased:false}
            ]
        }
    },
    computed : {
      filters(){
        return{
          beforeBuy: this.foods.filter(item=>!item.purchased),
          afterBuy: this.foods.filter(item=>item.purchased)
        }
      }
    }
}